<template>
	<view class="recipe-item">
		<view class="recipe-item-left" @click="toRecipeContent">
			<image src="../../../static/picture/meishi1.jpg" class="recipe-image" ></image>
		</view>
		<view class="recipe-item-right">
			<view class="recipe-title">蛋花豆腐羹</view>
			<view class="recipe-materials">鸡蛋、南豆腐、西红柿、<br>玉米、胡萝卜</view>
			<br>
			<span class="recipe-times">3333人喜欢</span>&nbsp;&nbsp;
			<text class="recipe-times">2222人收藏</text>
		</view>		
	</view>
	<view class="recipe-item">
		<view class="recipe-item-left" >
			<image src="../../../static/picture/meishi3.jpg" class="recipe-image" ></image>
		</view>
		<view class="recipe-item-right">
			<view class="recipe-title">虾仁豆腐汤</view>
			<view class="recipe-materials">北豆腐、菠菜叶、鲜虾、<br>小蘑菇、姜片</view>
			<br>
			<span class="recipe-times">5555人喜欢</span>&nbsp;&nbsp;
			<text class="recipe-times">4444人收藏</text>
		</view>		
	</view>
	
</template>

<script setup>
const toRecipeContent =()=>{
	uni.navigateTo({
		url: '/pages/recipe/content/content' 
	});
}	
</script>

<style scoped>
.recipe-item{
	font-size: 30rpx;
	margin: 30rpx 30rpx;
	border-bottom: 4rpx solid #f2f2f2;
	display: flex;
	justify-content: space-between;
}	
.recipe-item-right{
	margin-bottom: 30rpx;
	margin-right: 20rpx;
}
.recipe-times{
 	color: #999999;
 	font-size: 26rpx;
}  

.recipe-materials{
	margin-top: 10rpx;
	color: #999999;
}

.recipe-image{
	top: 14rpx;
	left: 20rpx;
	width: 260rpx; 
	height: 180rpx;
	border-radius: 15rpx;
}
</style>
